import React from 'react'

export default function WeatherCard({
  city = '未知城市',
  temperature = null,
  unit = '°C',
  condition = '未知',
  iconUrl = null,
  iconCode = null,
  updatedAt = null,
  humidity = null,
  wind = null,
  isMock = false,
}) {
  // 根据天气状况获取对应的背景渐变和图标
  const getWeatherStyle = () => {
    const conditionLower = condition.toLowerCase();
    
    if (conditionLower.includes('晴')) {
      return {
        gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        iconBg: 'linear-gradient(135deg, #ffd166, #fb8500)',
        textColor: '#ffffff'
      };
    } else if (conditionLower.includes('云') || conditionLower.includes('阴')) {
      return {
        gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
        iconBg: 'linear-gradient(135deg, #d1d5db, #9ca3af)',
        textColor: '#1f2937'
      };
    } else if (conditionLower.includes('雨')) {
      return {
        gradient: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
        iconBg: 'linear-gradient(135deg, #3b82f6, #1d4ed8)',
        textColor: '#ffffff'
      };
    } else if (conditionLower.includes('雪')) {
      return {
        gradient: 'linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%)',
        iconBg: 'linear-gradient(135deg, #f1f5f9, #cbd5e1)',
        textColor: '#1f2937'
      };
    } else {
      return {
        gradient: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
        iconBg: 'linear-gradient(135deg, #e0f2fe, #eef2ff)',
        textColor: '#1f2937'
      };
    }
  };

  const weatherStyle = getWeatherStyle();
  
  // 更现代的卡片风格，使用内联样式保持组件可移植性
  const styles = {
    container: {
      display: 'flex',
      flexDirection: 'column',
      gap: 24,
      padding: '24px',
      borderRadius: 16,
      background: weatherStyle.gradient,
      color: weatherStyle.textColor,
      boxShadow: '0 15px 35px rgba(0,0,0,0.15)',
      maxWidth: 600,
      width: '100%',
      fontFamily: 'Segoe UI, Roboto, Helvetica, Arial, sans-serif',
      transition: 'all 0.3s ease',
      position: 'relative',
      overflow: 'hidden',
    },
    headerRow: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      flexWrap: 'wrap',
      gap: 16
    },
    city: {
      fontSize: 24,
      fontWeight: 700,
      margin: 0
    },
    mainInfo: {
      display: 'flex',
      alignItems: 'center',
      gap: 24,
      flexWrap: 'wrap'
    },
    iconWrap: {
      width: 120, 
      height: 120,
      borderRadius: 24,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: weatherStyle.iconBg,
      flexShrink: 0,
    },
    icon: { width: 90, height: 90, objectFit: 'contain' },
    tempSection: {
      display: 'flex',
      flexDirection: 'column',
      gap: 8
    },
    tempBlock: {
      display: 'flex',
      alignItems: 'baseline',
      gap: 12
    },
    temp: {
      fontSize: 48,
      fontWeight: 800,
      lineHeight: 1,
      color: weatherStyle.textColor
    },
    unit: { fontSize: 20, fontWeight: 600, color: weatherStyle.textColor + 'CC' },
    condition: {
      fontSize: 18,
      fontWeight: 600,
      color: weatherStyle.textColor + 'EE'
    },
    detailsGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
      gap: 16
    },
    detailItem: {
      display: 'flex',
      flexDirection: 'column',
      gap: 4,
      padding: 16,
      borderRadius: 12,
      backgroundColor: 'rgba(255,255,255,0.15)',
      backdropFilter: 'blur(10px)',
      transition: 'transform 0.2s ease, box-shadow 0.2s ease',
      '&:hover': {
        transform: 'translateY(-2px)',
        boxShadow: '0 8px 16px rgba(0,0,0,0.15)'
      }
    },
    detailLabel: {
      fontSize: 14,
      fontWeight: 500,
      color: weatherStyle.textColor + 'CC'
    },
    detailValue: {
      fontSize: 16,
      fontWeight: 600,
      color: weatherStyle.textColor
    },
    updateInfo: {
      fontSize: 12,
      color: weatherStyle.textColor + '99',
      textAlign: 'right',
      marginTop: 8
    }
  };

  const tempDisplay = temperature === null || temperature === undefined ? '—' : temperature;
  
  // 根据天气状况显示对应的SVG图标
  const getWeatherIcon = () => {
    const conditionLower = condition.toLowerCase();
    
    if (conditionLower.includes('晴')) {
      return (
        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="5" fill="#FFD700" />
          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="#FFD700" strokeWidth="2" strokeLinecap="round" />
        </svg>
      );
    } else if (conditionLower.includes('云')) {
      return (
        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 10h-.01M18 16H6C4.34315 16 3 14.6569 3 13C3 11.3431 4.34315 10 6 10H7C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10H18C19.6569 10 21 11.3431 21 13C21 14.6569 19.6569 16 18 16Z" fill="#B0C4DE" />
        </svg>
      );
    } else if (conditionLower.includes('雨')) {
      return (
        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16 13L16.01 13M12 15L12.01 15M8 13L8.01 13M18 10h-.01M18 16H6C4.34315 16 3 14.6569 3 13C3 11.3431 4.34315 10 6 10H7C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10H18C19.6569 10 21 11.3431 21 13C21 14.6569 19.6569 16 18 16Z" fill="#4682B4" />
          <path d="M8 13L7 16M12 15L11 18M16 13L15 16" stroke="#4682B4" strokeWidth="2" strokeLinecap="round" />
        </svg>
      );
    } else if (conditionLower.includes('雪')) {
      return (
        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 10h-.01M18 16H6C4.34315 16 3 14.6569 3 13C3 11.3431 4.34315 10 6 10H7C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10H18C19.6569 10 21 11.3431 21 13C21 14.6569 19.6569 16 18 16Z" fill="#E0E0E0" />
          <circle cx="8" cy="13" r="1" fill="white" />
          <circle cx="12" cy="15" r="1" fill="white" />
          <circle cx="16" cy="13" r="1" fill="white" />
        </svg>
      );
    } else {
      // 默认图标
      return (
        <svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="5" fill="#FFD700" opacity="0.7" />
          <path d="M12 4v1M12 19v1M6.34 6.34l1.41 1.41M16.24 16.24l1.41 1.41M4 12h1M19 12h1M6.34 17.66l1.41-1.41M16.24 7.76l1.41-1.41" stroke="#FFD700" strokeWidth="2" strokeLinecap="round" opacity="0.7" />
          <path d="M18 10H6C4.34 10 3 11.34 3 13s1.34 3 3 3h12c1.66 0 3-1.34 3-3s-1.34-3-3-3z" fill="#B0C4DE" opacity="0.7" />
        </svg>
      );
    }
  };

  return (
      <section style={styles.container} aria-label={`天气：${city}`} role="region">
        {/* 模拟数据标记 - 适配现有组件结构 */}
        {isMock && (
          <div style={{
            position: 'absolute',
            top: '12px',
            right: '12px',
            backgroundColor: 'rgba(255, 255, 255, 0.25)',
            padding: '6px 12px',
            borderRadius: '20px',
            fontSize: '12px',
            fontWeight: '600',
            backdropFilter: 'blur(10px)',
            zIndex: 10,
            color: weatherStyle.textColor
          }}>
            示例数据
          </div>
        )}
      
      {/* 头部城市信息 */}
      <div style={styles.headerRow}>
        <h2 style={styles.city}>{city}</h2>
      </div>
      
      {/* 主要天气信息 */}
      <div style={styles.mainInfo}>
        <div style={styles.iconWrap} aria-hidden>
          {iconUrl ? <img src={iconUrl} alt={condition} style={styles.icon} /> : getWeatherIcon()}
        </div>
        
        <div style={styles.tempSection}>
          <div style={styles.tempBlock} aria-live="polite">
            <div style={styles.temp}>{tempDisplay}</div>
            <div style={styles.unit}>{unit}</div>
          </div>
          <div style={styles.condition}>{condition}</div>
        </div>
      </div>
      
      {/* 详细天气数据 */}
      <div style={styles.detailsGrid}>
        {humidity !== null && humidity !== undefined && (
          <div style={styles.detailItem} title={`湿度 ${humidity}%`}>
            <div style={styles.detailLabel}>湿度</div>
            <div style={styles.detailValue}>{humidity}%</div>
          </div>
        )}
        
        {wind !== null && wind !== undefined && (
          <div style={styles.detailItem} title={`风力风向 ${wind}`}>
            <div style={styles.detailLabel}>风力风向</div>
            <div style={styles.detailValue}>{wind}</div>
          </div>
        )}
        
        {/* 额外信息占位 */}
        <div style={styles.detailItem}>
          <div style={styles.detailLabel}>体感温度</div>
          <div style={styles.detailValue}>
            {temperature !== null && temperature !== undefined 
              ? `${parseInt(temperature) - 2}~${parseInt(temperature) + 2}${unit}` 
              : '—'}
          </div>
        </div>
        
        <div style={styles.detailItem}>
          <div style={styles.detailLabel}>气压</div>
          <div style={styles.detailValue}>1013 hPa</div>
        </div>
      </div>
      
      {/* 更新时间 */}
      {updatedAt && <div style={styles.updateInfo}>更新时间: {updatedAt}</div>}
    </section>
  )
}
